<template lang="html">
    <div
      class="x-bar"
      :id="chartId"
      :option='option'
      >
      </div>
</template>

<script>
import {formatNum} from '../../util/tool'
export default {
  props : {
    chartId : {
      type : String,
    },
    title : {
      type : String,
    },
    options : {
      type : Object,
    }
  },
  data(){
    return {
      chart : '',
      option : {
          color: ['#0d194a','#46feff'],
          title: {
              text: '入住酒店TOP10',
              left: 'center',
              textStyle: {
                 color: '#fff',
              }
          },
          // tooltip: {
          //     trigger: 'axis',
          //     axisPointer: {
          //         type: 'shadow'
          //     },
          // },
          grid: {
              top : '14%',
              left: '0%',
              right: '7%',
              bottom: '2%',
              containLabel: true
          },
          xAxis: [
            {
                type: 'value',
                boundaryGap: [0, 0.02],
                splitNumber : 4,
                axisLabel: {
                    // formatter: '{value}%',
                    textStyle: {
                        color: '#fff',
                        fontWeight: '80'
                    }
                },
                axisLine :{
                  show : true,
                  lineStyle : {
                    color : '#fff'
                  }
                },
                splitLine :{
                  show : false,
                }
            },
          ],
          yAxis: [
            {
                type: 'category',
                data: this.options.yaxis,
                axisLabel: {
                    show: true,
                    interval: 0,
                    rotate: 0,
                    margin: 10,
                    inside: false,
                    textStyle: {
                        color: '#fff',
                        fontWeight: '50'
                    }
                },
                axisLine :{
                  show : false,
                  lineStyle : {
                    color : '#fff'
                  }
                },
                axisTick : {
                  show : false
                }
            },
            {
                type: 'category',
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                splitArea: {
                    show: false
                },
                splitLine: {
                    show: false
                },
            }
          ],
          series: [
            {
              name : '背景',
              type: 'bar',
              yAxisIndex: 1,
              zlevel: 1,
              // barGap: '-100%',
              data: this.options.maxData//传入最大值
            },
            {
              type: 'bar',
              zlevel: 2,
              label: {
                  normal: {
                      show: true,
                      // formatter: '{c}',
                      formatter: function(v) {
                          var val = v.data;
                          if (val == 0) {
                              return '';
                          }
                          return formatNum(val);
                      },
                      color: '#fff',
                      position : 'right',
                      distance : 10,
                  }
              },
              data: this.options.data//传入数据
            },
        ]
      }
    }
  },
  watch : {
    options: {
     handler(newVal, oldVal) {
      if (this.chart) {
       if (newVal) {
         this.option.yAxis[0].data = newVal.yaxis;
         this.option.series[0].data = newVal.maxData;
         this.option.series[1].data = newVal.data;
        this.chart.setOption(this.option);
       } else {
        this.chart.setOption(this.option);
       }
      } else {
        this.init();
      }
     },
     deep: true
  }
  },
  methods : {
    init() {
     this.chart = this.$echarts.init(document.getElementById(this.chartId));
     this.chart.setOption(this.option);
     window.addEventListener("resize", this.chart.resize);
    }
  },
  mounted(){
    this.init();
  }
}
</script>

<style lang="scss" scoped>
  .x-bar {
    width: 100%;
    height: 100%;
  }
</style>
